<template>
	<view>
		<swiper class="swiper" circular indicator-dots="true" autoplay="true">
			<swiper-item>
				<advImg></advImg>
			</swiper-item>
			<swiper-item>
				<advImg></advImg>
			</swiper-item>
			<swiper-item>
				<advImg></advImg>
			</swiper-item>
		</swiper>
		<view class="home-nav">
			<navigator v-for="item in navList" :index="item.id" :url="item.url">
				<view class="nav-item">
					<image class="nav-item-img" :src="item.path"></image>
					<text class="nav-item-txt">{{item.title}}</text>
				</view>
			</navigator>
		</view>
		
	</view>
</template>

<script>
	import advImg from '../../components/adv-img'
	
	export default {
		data() {
			return {
				navList:[
					{id:1,title:"水果识别系统",path:"../../static/icon/fruit-recognize.png",url:"/pages/recognize/recognize"},
					{id:2,title:"水果分拣平台",path:"../../static/logo.png",url:"#"},
					{id:3,title:"水果分拣平台",path:"../../static/logo.png",url:"#"},
					{id:4,title:"水果分拣平台",path:"../../static/logo.png",url:"#"},
					{id:5,title:"水果分拣平台",path:"../../static/logo.png",url:"#"},
					{id:6,title:"水果分拣平台",path:"../../static/logo.png",url:"#"}
				]
			}
		},
		// 在当前页面中，注册创建的组件
		components:{
			advImg
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
.swiper{
	width: 100%;
	height: 360rpx;
}
.home-nav{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.nav-item{
		width: 200rpx;
		height: 220rpx;
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.nav-item-img{
			width: 60%;
			height: 60%;
		}
		.nav-item-txt{
			margin: 10rpx 0;
		}
	}
}
</style>